<template>
  <div>
    <el-container>
      <!-- 侧栏 -->
      <div class="aside">
        <el-aside style="width:100%">
          <!-- 侧栏导航 -->
          <el-row>
            <el-col :span="24">
              <h5>自定义颜色</h5>
              <el-menu
                :collapse="collapse"
                default-active="1"
                :default-openeds="['1']"
                :unique-opened="true"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :router="true"
              >
                <!-- ↑使用router属性之后 会将 menu-item上的index属性当成路由跳转 -->
                <el-menu-item index="positions">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>职位管理</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                  <i class="el-icon-document"></i>
                  <span slot="title">考勤管理</span>
                </el-menu-item>
                <el-menu-item index="mine">
                  <i class="el-icon-setting"></i>
                  <span slot="title">我的中心</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
      </div>
      <el-container>
        <!-- 顶部 -->
        <el-header>
          <!-- 栅格布局 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content icon">
                <!-- 注册一个点击事件 合并合并菜单栏 -->
                <i class="el-icon-tickets" @click="collapse=!collapse"></i>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content center">千锋教育管理系统</div>
            </el-col>
            <el-col :span="8" class="right">
              <div class="grid-content login">
                <span>欢迎您</span>
                <a href="javascript:;">{{$store.getters.userInfo.username}}</a>
                <a href="javascript:;" style="margin-left:20px" @click="quit">退出</a>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <!-- 主体部分 -->
        <el-main>
          <!-- 子路由的视图 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    quit() {
      //清除localstorage里面的token 然后让页面跳转到登入
      localStorage.removeItem("token");
      this.$router.push("/login")
    }
  }
};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #545c64;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.grid-content {
  cursor: pointer;
}

.el-aside {
  background-color: #545c64;
  color: #fff;
  text-align: center;
}

.el-main {
  background-color: #e5e5e5;
  color: #fff;
  text-align: center;
  height: 100%;
}

/* 栅格的样式 */
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.grid-content.center {
  font-size: 24px;
  font-weight: 700;
}
.el-col.right {
  padding-right: 0 !important;
  text-align: right;
}
.grid-content.login a {
  color: red;
}
.grid-content.icon {
  text-align: left;
  font-size: 26px;
}
/*侧栏样式*/
.el-menu {
  border: none;
}
.aside {
  max-width: 300px;
  background-color: #545c64;
}
.el-container{
  height: 1000px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>